<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="1080"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    @close="close"
    :destroyOnClose="true"
  >
    <vxe-grid v-bind="grid" ref="xGrid">
      <template #toolbar_buttons> </template>
      <template #toolbar_tools> </template>
      <template #loading>
        <a-spin></a-spin>
      </template>
      <template #empty>
        <eip-empty />
      </template>
    </vxe-grid>
  </a-drawer>
</template>
<script>
import { query } from "@/services/system/job/log";
export default {
  name: "joblog",
  data() {
    return {
      grid: {
        id: "joblog",
        key: null,
        loading: true,
        height: this.eipTableHeight() + 40,
        pagerConfig: {},
        printConfig: {},
        exportConfig: {},
        sortConfig: {
          trigger: "cell",
          defaultSort: { field: "createTime", order: "desc" },
          orders: ["desc", "asc", null],
          remote: true,
          multiple: true,
          chronological: true,
        },
        filterConfig: {
          remote: true,
        },
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        columns: [
          { type: "seq", width: 50, title: "序号" },

          {
            field: "createTime",
            title: "时间",
            width: 200,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "message",
            title: "内容",
            minWidth: 200,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
        ],
        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          props: {
            result: "data", // 配置响应结果列表字段
            total: "total", // 配置响应结果总页数字段
          },
          ajax: {
            query: ({ page, sorts, filters }) => {
              return new Promise((resolve) => {
                const firstSort = sorts[0];
                query({
                  filters: this.eipTableFilter(filters),
                  current: page.currentPage,
                  size: page.pageSize,
                  sort: this.eipGridSort(sorts),
                  correlation: this.correlation,
                }).then((result) => {
                  if (result.code == this.eipResultCode.success) {
                    resolve(result);
                  }
                  this.grid.loading = false;
                });
              });
            },
          },
        },
      },
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    correlation: {
      type: String,
    },
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style scoped></style>
